import React, {useState, useEffect} from 'react';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'

function Index() {
  useEffect(()=>{
    console.log('useEffect 老弟，你来了！Index页面')
    return ()=>{ // 配合`useEffect`第二个参数`[]`使用，相当于`componentWillUnmount`
      console.log('老弟！你走了！Index')
    }
  }, [])
  return <h2>JSPang.com</h2>
}

function List() {
  useEffect(()=>{
    console.log('useEffect 老弟，你来了！List页面')
    return ()=>{
      console.log('老弟！你走了！List')
    }
  }, [])
  return <h2>List Page</h2>
}

export default function App() {
  // # 状态声明
  const [age, setAge] = useState(18) // 数组解构

  // # 生命周期函数
  useEffect(() => {
    // 此处的行为和类组件中 componentDidMount() 和 componentDidUpdate() 相同
    // 异步的
    console.log(`useEffect：age=${age}`)

    return ()=>{
      console.log('=====================')
    }
  }, [age])


  return (
    <div>
      <ul>
        <li>JSPang 今年：{age} 岁 <button onClick={() => {
          setAge(age + 1)
        }}>+1岁</button></li>
      </ul>
      <hr/>

      <Router>
        <ul>
          <li><Link to="/">首页</Link></li>
          <li><Link to="/list/">列表</Link></li>
        </ul>
        <Route path="/" exact component={Index}/>
        <Route path="/list/" component={List}/>
      </Router>
    </div>
  )
}
